<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>学期设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
</head>
<style>
    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-table-page {
        text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<div class="utable" style="width: 1150px;" >
    <table class="layui-hide" id="table" lay-filter="table"></table>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <a lay-event="fh" onclick="javascript:history.back(-1);" href="#" style="text-decoration:none">
            <i class="layui-icon"style="font-size: 20px">&#xe65c;</i>
        </a>
        <button lay-event="add" style="margin-left: 25px" class="layui-btn layui-btn-radius layui-btn-sm">新增</button>
    </div>
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-radius layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
</script>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use('table', function() {
        var table = layui.table;

        table.render({
            elem: '#table'
            , id: 'table'
            , height: 560
            , width: 1150
            , url: '/system/tremdata' //数据接口
            , page: true //开启分页
            , toolbar: '#toolbar'
            , cols: [[
                {field: 'termid', title: '编号', fixed: 'left', unresize: true, sort: true}
                , {field: 'termname', title: '学期名称', edit: 'true'}
                , {field: 'remark', title: '备注', edit: 'true'}
                , {fixed: 'right', title: '操作', toolbar: '#bar'}
            ]]
        });

        layui.use('table', function () {
            var table = layui.table;

            //监听单元格编辑
            table.on('edit(table)', function (obj) {
                var tr = obj.tr;
                // 单元格编辑之前的值
                var oldtext = $(tr).find("td[data-field='"+obj.field+"'] div").text();
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                // layer.msg(data.classtypename)
                $.ajax({
                    url: '/system/termupdate',
                    type: 'post',
                    data: {
                        termid:data.termid,
                        termname:data.termname,
                        remark:data.remark
                    },
                    dataType: 'json',
                    success(data) {
                        if (data) {
                            parent.layer.msg('修改成功', {icon: 1});
                        }else {
                            obj.update({termname:oldtext})
                            layer.msg('学期名称重复不可修改', { icon: 5, time: 2000 });
                        }
                    }
                })
            });

            //头工具栏事件
            table.on('toolbar(table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'add':
                        var data = checkStatus.data;
                        // layer.alert(JSON.stringify(data));
                        //prompt层
                        layer.prompt({title: '学期名称', formType: 3}, function(name, index){
                            layer.close(index);
                        layer.prompt({title: '说明', formType: 2}, function (remark, index) {
                            layer.close(index);
                            // layer.msg('演示完毕！您的口令：'+'<br>您最后写下了：'+name);
                            $.ajax({
                                url: '/system/termadd',
                                type: 'post',
                                data: {
                                    termname: name,
                                    remark: remark
                                },
                                dataType: 'text',
                                success(data) {
                                    if (data == 1) {
                                        parent.layer.msg('保存成功', {icon: 1});
                                        $('.layui-laypage-btn').click();
                                    } else {
                                        parent.layer.msg('有重复的存在', {icon: 2});
                                    }
                                }
                            });
                        });
                        });
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        // layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;
            });

            //监听行工具事件
            table.on('tool(table)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            url: '/system/termdelete',
                            type: 'post',
                            data: {
                                id: data.termid
                            },
                            dataType: 'text',
                            success(data) {
                                if (data == 1) {
                                    parent.layer.msg('删除成功', {icon: 1});
                                } else {
                                    parent.layer.msg('出问题了', {icon: 2});
                                }
                            }
                        });
                    });
                }

            });
        });
    })
</script>
</body>
</html>